<?php
/**
 * 图片轮播
 * <pre>
 * $this->widget('lib.widgets.CKinSlideShow', array(
 *  // 轮播项
 *  'items' => array(
 *   array('src' => '/platform/uploaded/2012/02/27/133031055649901.jpg', 'link'=>'#', 'title' => '标题1'),
 *   array('src' => '/platform/uploaded/2012/02/27/133031047296537.jpg', 'link'=>'#', 'title' => '标题2'),
 *   array('src' => '/platform/uploaded/2012/02/27/133033708920779.jpg', 'link'=>'#', 'title' => '标题3'),
 *  ),
 *  // 高度
 *  'height' => '300px',
 *  // 宽度
 *  'width' => '1000px',
 * ));
 * </pre>
 * jquery.KinSlideshow-1.2.1.min.js
 * @author yangdongqi <yangdongqi@hayzone.com>
 * @package lib.widgets
 */
class CKinSlideShow extends CWidget {
	
	/**
	 * 移动方向
	 * <br>down\up\left\right
	 * @var string
	 */
	public $moveStyle = 'down';
	
	/**
	 * 滚动时间间隔
	 * @var int 单位为秒(s).
	 */
	public $intervalTime = 5;
	
	/**
	 * 事件
	 * @var string
	 */
	public $mouseEvent = 'mouseover';
	
	/**
	 * 标题默认选项
	 * @var array
	 */
	protected $_titleFont = array(
		'TitleFont_size' => 14,
		'TitleFont_color' => '#FFF',
		'TitleFont_weight' => 'bold',
	);
	
	/**
	 * 标题选项设置
	 * <pre>
	 * // k=>v(对应默认值)
	 * array(
	 *  // 字体大小
	 *  'TitleFont_size' => 14,
	 *  // 字体颜色
	 *  'TitleFont_color' => '#FFF',
	 *  // 字体粗细
	 *  'TitleFont_weight' => 'bold',
	 * );
	 * </pre>
	 * @var array
	 */
	public $titleFont = array();
	
	/**
	 * 按钮默认选项
	 * @var array
	 */
	protected $_btn = array(
		'btn_bgColor' => '#FFF',
		'btn_bgHoverColor' => '#FF8803',
		'btn_fontColor' => '#000',
		'btn_fontHoverColor' => '#FFF',
		'btn_fontFamily' => 'Verdana',
		'btn_borderColor' => '#4F4B46',
		'btn_borderHoverColor' => '#FF8803',
		'btn_borderWidth' => '0',
		'btn_bgAlpha' => '0.8',
	);
	
	/**
	 * 按钮选项设置
	 * <pre>
	 * // k=>v(对应默认值)
	 * array(
	 *  // 背景色
	 *  'btn_bgColor' => '#FFF',
	 *  // 选中背景色
	 *  'btn_bgHoverColor' => '#FF8803',
	 *  // 字体颜色
	 *  'btn_fontColor' => '#000',
	 *  // 选中字体颜色
	 *  'btn_fontHoverColor' => '#FFF',
	 *  // 字体
	 *  'btn_fontFamily' => 'Verdana',
	 *  // 边框颜色
	 *  'btn_borderColor' => '#4F4B46',
	 *  // 选中边框色
	 *  'btn_borderHoverColor' => '#FF8803',
	 *  // 边框宽度
	 *  'btn_borderWidth' => '0',
	 *  // 透明度
	 *  'btn_bgAlpha' => '0.8',
	 * );
	 * </pre>
	 * @var array
	 */
	public $btn = array();
	
	/**
	 * 所要使用的HTML标签
	 * @var string
	 */
	public $tagName = 'div';
	
	/**
	 * 标签的HTML属性
	 * @var array
	 */
	public $htmlOptions = array();
	
	/**
	 * 每个a的HTML属性
	 * @var array
	 */
	public $linkHtmlOptions = array();
	
	/**
	 * 每个img的HTML属性
	 * @var array
	 */
	public $imgHtmlOptions = array();
	
	/**
	 * 轮播项
	 * <br>结构如下：
	 * <pre>
	 * array(
	 *  ...
	 *  array(
	 *   // 图片的URL地址
	 *   'src' => 'http://host/1.jpg'
	 *   // 连接地址
	 *   'link' => 'http://host/1.html',
	 *   // 连接打开方式
	 *   'target' => '_blank',
	 *   // 标题
	 *   'title' => 'Dome 1',
	 *  ),
	 *  ...
	 * );
	 * </pre>
	 * @var array
	 */
	public $items = array();

	/**
	 * 高度
	 * @var string
	 */
	public $height = '100px';
	
	/**
	 * 宽度
	 * @var string
	 */
	public $width = '500px';
	
	/**
	 * 连接默认打开方式
	 * @var string
	 */
	public $defaultTarget = '_self';
	
	/**
	 * 引用计数
	 * @var int
	 */
	private static $_count = 0;
	
	public function run() {
		self::registerScriptFile();

		$htmlOptions = $this->resloveHtmlOptions();
		$id = $htmlOptions['id'];
		
		echo CHtml::openTag($this->tagName, $htmlOptions);
		foreach($this->items as $one) {
			$imgHtmlOptions = $this->imgHtmlOptions;
			$imgHtmlOptions['height'] = $this->height;
			$imgHtmlOptions['width'] = $this->width;
			$linkHtmlOptions = $this->linkHtmlOptions;
			$linkHtmlOptions['target'] = isset($one['target']) ? $one['target'] : $this->defaultTarget;
			$img = CHtml::image($one['src'], $one['title'], $imgHtmlOptions);
			$link = CHtml::link($img, $one['link'], $linkHtmlOptions);
			echo $link;
		}
		echo CHtml::closeTag($this->tagName);
		$titleFont = CJSON::encode($this->getTitleFontConfig());
		$btn = CJSON::encode($this->getBtnConfig());
		
		$script = "
			jQuery().ready(function(){
				$('#{$id}').KinSlideshow({
					moveStyle: '{$this->moveStyle}',
					intervalTime: '{$this->intervalTime}',
					mouseEvent: '{$this->mouseEvent}',
					titleFont: {$titleFont},
					btn: {$btn}			
				});
			});
		";
		
		echo "<script>$script</script>";
	}
	
	/**
	 * getBtnConfig
	 * @return array
	 */
	public function getBtnConfig() {
		return array_merge($this->_btn, $this->btn);
	}
	
	/**
	 * getTitleFontConfig
	 * @return array
	 */
	public function getTitleFontConfig() {
		return array_merge($this->_titleFont, $this->titleFont);
	}
	
	/**
	 * resloveHtmlOptions
	 * @return array
	 */
	protected function resloveHtmlOptions() {
		$htmlOptions = $this->htmlOptions;
		if(!isset($htmlOptions['id'])) {
			$htmlOptions['id'] = 'KinSlideShow_'.self::$_count++;
		}
		if($this->height || $this->width) {
			$htmlOptions['style'] = isset($htmlOptions['style'])
				? $htmlOptions['style'] : '';
			if($this->height)
				$htmlOptions['style'] .= ';height: '.$this->height;
			if($this->width)
				$htmlOptions['style'] .= ';width: '.$this->width;
		}
		return $htmlOptions;
	}
	
	/**
	 * registerScriptFile
	 * @return void
	 */
	public static function registerScriptFile() {
		if(self::$_count == 0) {
			$jsUrl = Yii::app()->assetManager->publish(
				dirname(__FILE__).'/js/jquery.KinSlideshow-1.2.1.min.js'
			);
			echo "<script src='{$jsUrl}'></script>";
		}
	}

}

?>